<template>
  <el-container>
    <el-header>
      <div class="logo">
        涛帅考试
      </div>
      <div class="menu">
        <el-menu :default-active="$route.path" mode="horizontal" router>
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/problem/search">搜题</el-menu-item>
          <el-menu-item index="/contribution" disabled>杰出贡献</el-menu-item>
          <el-menu-item index="/concat">联系我们</el-menu-item>
        </el-menu>
      </div>
      <div class="login">
        <el-button @click="login">登录</el-button>
        <el-button type="primary" @click="register">注册</el-button>
      </div>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>

<script>
import CourseCard from "../components/CourseCard.vue";
export default {
  components: { CourseCard },
  data() {
    return {
      courses: [],
      loading: false,
    };
  },
  created() {
    // 获取所有课程
    this.getCourses();
  },
  methods: {
    login() {
      this.$router.push('/login')
    },
    register()  {
      this.$router.push('/register')

    },
    async getCourses() {
      this.loading = true;
      const { data: res } = await this.$http.get("courses");
      if (res.code == 200) {
        return;
      }
      this.courses = res.data.courses;
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
  @import "../assets/css/common.scss";
.el-container {
  margin: 0 auto;
  height: 100%;
  .el-header {
    width: 1500px;
    padding: 0 160px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
      font-size: 20px;
      font-weight: 700;
      line-height: 30px;
      color: $theme-color;
      width: 100px;

    }
    .menu {
      width: 700px;
      .el-menu-item {
        font-size: 15px;
        margin-left: 30px;
      }
    }

    border-bottom: 1px solid #eee;
  }
  .el-main {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    /*padding-bottom: 0;*/
  }
}
</style>
